<!doctype html>
<html>

	<head>
		<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
		<script src="jquery.js"></script>
		<style>
		
			/*  放大镜 	*/
			
			.xiala2 {
				width: 1300px;
				height: 210px;
				
				float: left;
				margin-left: 310px;
				margin-top: 5px;
				position: absolute;
			}
			
			.shrkb {
				width: 1100px;
				height: 35px;
				background-color: black;
			}
			
			.shrk {
				width: 650px;
				height: 26px;
				opacity: 1;
				margin-top: 2px;
				margin-left: 5px;
				float: left;
			}
			
			.sousuo2 {
				
				width: 685px;
				height: 170px;
				background: white;
			}
			
			.xskbox {
				background: black;
				width: 670px;
				height: 30px;
				margin-left: -25px;
				margin-top: 10px;
				float: left;
			}
			
			.guanb {
				background-image: url(img/x.jpg);
				width: 30px;
				height: 30px;
				margin-left: 820px;
				margin-top: -32px;
				float: left;
			}
			
			.guanb:hover {
				opacity: 0.4;
				cursor: pointer;
			}
			/*其他*/
			
			.bg1{float: left;position:absolute;margin-left: 740px;margin-top:500px;width: 50px;height: 3px;background: #dddddd;z-index:100;}
		   .line1{height:100%;width:0;position:relative;background-color:#808080;}
		   .bg2{float: left;position:absolute;margin-left: 800px;margin-top: 500px;width: 50px;height: 3px;background: #dddddd;z-index:100}
		   .line2{height:100%;width:0;position:relative;background-color:#808080;}
		   .bg3{float: left;position:absolute;margin-left: 860px;margin-top: 500px;width: 50px;height: 3px;background: #dddddd;z-index:100}
		   .line3{height:100%;width:0;position:relative;background-color:#808080;}
             .bg1,.bg2,.bg3{cursor: pointer}
          #stop{width:50px;}
			
			div {
				float: left;
				width: 1582px;
				overflow: hidden;
			}
			
			span {
				position: relative;
				float: left;
				width: 7910px;
				height: 500px;
				margin-top: -10px;
			}
			
			a {
				text-align: center;
				float: left;
				margin-left: 100px;
				color: white;
				margin-top: 10px;
			}
			
			a:hover {
				opacity: 0.4;
				cursor: pointer;
			}
			
			.daohang {
				width: 1582px;
				height: 40px;
				background: #303030;
			}
			
			.dhbox {
				width: 1200px;
				height: 40px;
				float: left;
				text-align: center;
				margin-left: 200px;
			}
			
			.img {
				float: left;
				margin-top: 8px;
			}
			
			.img:hover {
				opacity: 0.4;
				cursor: pointer;
			}
			
			.bnbox {
				width: 1582px;
				height: 500px;
				float: left;
			z-index:90;}
			
			.buttonbox {
				margin-left: 800px;
				margin-top: -40px;
				float: left;
				position: relative;
			}
			
			#div {
				width: 260px;
				height: 300px;
				border: solid 1px gainsboro;
				float: left;
				margin-left: 1170px;
				margin-top: 45px;
				position: absolute;
			}
			
			.img1 {
				opacity: 1
			}
			
			.img1:hover {
				opacity: 0.6;
				cursor: pointer;
			}
			
			.img2 {
				opacity: 1
			}
			
			.img2:hover {
				opacity: 0.6;
				cursor: pointer;
			}
			
			.gwbox1 {
				width: 253px;
				height: 93px;
				border-bottom: solid 1px #e4e4e4;
				float: left;
				margin-left: 18px;
			}
			
			.gwbox {
				width: 253px;
				height: 47px;
				border-bottom: solid 1px #e4e4e4;
				float: left;
				margin-left: 18px;
			}
			
			.xiala {
				color: #adadad;
				float: left;
				margin-left: 70px;
				margin-top: 40px;
				font-size: 14px;
			}
			
			.gwdbs {
				color: #1473bc;
				float: left;
				margin-top: 17px;
				font-size: 13px;
				margin-left: 30px;
			}
			
			.gwdbs:hover {
				border-bottom: solid 1px #1473bc;
				cursor: pointer;
			}
			
			.gwt {
				float: left;
				margin-top: 15px;
			}
			
			.gwt:hover {
				opacity: 1;
				cursor: pointer;
			}
			
			.you {
				background-image: url(img/右。.png);
				background-repeat: no-repeat;
				width: 300px;
				height: 300px;
				float: left;
				margin-left: 1410px;
				margin-top: 240px;
				position: absolute;
				opacity: 0.01;
			}
			
			.zuo {
				background-image: url(img/左.png);
				background-repeat: no-repeat;
				width: 300px;
				height: 300px;
				float: left;
				margin-left: 70px;
				margin-top: 240px;
				position: absolute;
				opacity: 0.01;
			}
			
			.zuo:hover {
				opacity: 0.6;
				cursor: pointer;
			}
			
			.you:hover {
				opacity: 0.6;
				cursor: pointer;
			}
			
			.other {}
		</style>
		<meta charset="utf-8">
		<title>无标题文档</title>
	</head>

	<body>
		<!--滚动条-->
		<div class=" bg1">
			<div class="line1"></div>
		</div>
		<div class=" bg2">
			<div class="line2"></div>
		</div>
		<div class=" bg3">
			<div class="line3"></div>
		</div>

		<script>
		line()
		function line(){
			$(".line1").animate({width:10},950,"linear").
			animate({width:25},950,"linear").
			animate({width:50},950,"linear",function(){
			$(".line2").animate({width:10},950,"linear").
			animate({width:25},950,"linear").
			animate({width:50},950,"linear",function(){
			$(".line3").animate({width:10},950,"linear").
			animate({width:25},950,"linear").
			animate({width:50},950,"linear",function(){	
			//效果从开始位置循环
			setTimeout(line,10)
			$(".line1").css({width:0})
			$(".line2").css({width:0})
			$(".line3").css({width:0})
		})
				})
		})
			
		}
		</script>

		<!--导航-->
		<div class="daohang">
			<div class="dhbox">
				<img src="img/t0167a847b02aa4bbc1.png" style="width: 23px;height: 23px;" class="img" />
				<a>Mac</a>
				<a>iPad</a>
				<a>iPhone</a>
				<a>Watch</a>
				<a>Music</a>
				<a>技术支持</a>
				<img src="img/t010aed6aac62190957.png" style="width: 23px;height: 23px;margin-left: 10px;" class="img2" />
				<img src="img/购物.png" style="width: 22px;height: 25px;margin-left: 80px;margin-top: 5px;color: white;" class=" img1" />
			</div>
		</div>

		<div>
			<span>
				
					<div class="bnbox"><img src="img/苹果1.png"></div>
					<div class="bnbox"><img class="banner"/><img src="img/苹果2.png" /></div>
					<div class="bnbox"><img class="banner"/><img src="img/苹果3.png"></div>
					<div class="bnbox"><img src="img/苹果1.png"></div>
					<div class="bnbox"><img class="banner"/><img src="img/苹果2.png" /></div>
			</span>
			<!--<div class="buttonbox">
				<input type="button" style="width:40px;height:1px;">
				<input type="button" style="width:40px;height:1px;">
				<input type="button" style="width:40px;height:1px;">
			</div>-->
		</div>
		<script>
			var n = 0

			function run() {
				if(n < 3) {
					n++
				} else {
					n = 1;
					$("span").css({
						left: 0
					})
				}
				$("span").stop(true, true).animate({
					left: -1582 * n
				}, 500)
			}
			var q = setInterval(run, 3000)
			$("div").click(
					function() {
						clearInterval(q) //点按钮停止之前的定时器
						n = $("div").index(this)
						$("span").stop(true, true).animate({
							left: -1582 * n
						}, 500)
						
						setTimeout(function() { //点按钮后4秒中后重新定时
								clearInterval(q) //避免连续点击按钮重复定时
								q = setInterval(run, 2000)
							}, 1000) //4秒	

						

						})
		</script>

		<!--下拉框-->

		<div id="div">
			<div class="gwbox1">
				<a class="xiala">你的购物袋是空的</a>
			</div>
			<div class="gwbox">
				<img src="img/360截图20161111142838872_03.png" class="gwt" />
				<a class="gwdbs">购物袋</a>
			</div>
			<div class="gwbox">
				<img src="img/360截图20161111142838872_06.png" class="gwt" />
				<a class="gwdbs">收藏</a>
			</div>
			<div class="gwbox">
				<img src="img/360截图20161111142838872_08.png" class="gwt" />
				<a class="gwdbs">订单</a>
			</div>
			<div class="gwbox">
				<img src="img/360截图20161111142838872_10.png" class="gwt" />
				<a class="gwdbs">账户</a>
			</div>
			<div class="gwbox">
				<img src="img/360截图20161111142838872_12.png" class="gwt" />
				<a class="gwdbs">登录</a>
			</div>

		</div>

		<script>
			$(document).ready(function() {
				$("#div").hide();

				$(" .img1").click(function() {

					$("#div").toggle();

				});

			})
		</script>

		<div class="zuo"></div>
		<div class="you"></div>
		<script>
			$(document).ready(function() {

				$("div").mouseover(function() {
					$("this").fadeIn();
				});

			});
		</script>

		<div class=" xiala2">
			<div class=" shrkb">
				<a style="margin-top:8px;margin-left:7px;float: left"><img src="img/t010aed6aac62190957.png" width="20" height="20" /></a>
				<input class=" shrk" value="搜索 apple.com" style="font-size:18px;color:ghostwhite;background-color:transparent; outline: none;border:hidden;">
			</div>
			<div class="guanb"></div>

			<div class="sousuo2">

				<div class="gwbox">
				<img src="img/360截图20161111142838872_03.png" class="gwt" />
				<a class="gwdbs">购物袋</a>
			</div>
			<div class="gwbox">
				<img src="img/360截图20161111142838872_06.png" class="gwt" />
				<a class="gwdbs">收藏</a>
			</div>

			</div>

			<!--放大镜-->

			<script>
				$(document).ready(function() {
					$(".xiala2").hide()
					$(".img2").click(function() {
						$(".xiala2").show()
					})
					$(".guanb").click(function() {
						$(".xiala2").hide()
					})
				})
			</script>

	</body>

</html>